<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view>
		<view class="wrap">
			<view class="tabs">
				<u-tabs lineWidth="30" :itemStyle="style.itemStyle" :activeStyle="style.activeStyle"
					:inactiveStyle="style.inactiveStyle" :list="list" :current="current" @change="tabClick()">
				</u-tabs>
			</view>
			<!-- 首页 -->
			<activity-detail :activityId="activityId" :time="time" @change="tabsChange()"></activity-detail>
		</view>

	</view>
</template>

<script>
	import {
		getHostList,
		getBannerList,
		getopenId,
		userLogin,
		getUserByOpenId,
		userEdit,
		usersave,
		getStudentByOpenId
	} from '@/common/api.js';
	export default {
		data() {
			return {
				show: false,
				content: "是否要报名",
				style: {
					activeStyle: "color: rgba(0,0,0,0.90);font-size: 14px;font-weight: blod;",
					inactiveStyle: "font-size: 14px;color: rgba(0,0,0,0.5)}",
					itemStyle: "height: 48px;padding:0px;width:20%"
				},
				// tabs切换
				list: [{
						name: '首页',
						path: "pages/componet/activity/detail/index"
					},
					{
						name: '活动报名',
						path: "pages/componet/activity/activeSingin/index"
					},
					{
						name: '进度',
						path: "pages/componet/activity/activeProg/index"
					},
					{
						name: '赛事说明',
						path: "pages/componet/activity/activeMatch/index"
					},
					{
						name: 'FAQ',
						path: "pages/componet/activity/activeFaq/index"
					}
				],
				current: 0,
				activityId: 0, //获取活动Id
				time: 0,
				state: 0,
				userInfo: null,
				type: 0,
				WxData: {
					nickName: "请登录",
					avatarUrl: "",
					state: "请登录"
				},
				loginType: 0,
				isstudent: false,
				studentState: 0
			};
		},
		onLoad: function(data) {
			console.log(data, "活动详情")
			this.activityId = 10
			/* this.activityId = data.id - 0
			this.state = data.state - 0 */
		},
		onShow: function() {
			this.info()
		},
		methods: {
			info() {
				this.current = 0
				this.time = (new Date).getTime()
				console.log(this.time, "这是时间")
				this.activityId = 10
				this.state = 0
				this.userInfo = this.$store.state.$userInfo
				if (!this.userInfo.openId) {
					this.loginType = 0
				} else if (!this.userInfo.phone) {
					this.loginType = 1
				} else {
					this.loginType = 2
					this.getStudentByOpenId() //获取学生录入信息
				}

			},
			tabClick(item) {
				this.current = item.index
				const that = this
				if (item.index === 1) {
					if (!this.userInfo.openId) {
						this.loginWx()
						return false
					} else if (!this.userInfo.phone) {
						this.showModalPhone()
						return false
					}

				}
				if (this.userInfo.profession !== '学生' && item.index === 1) {
					uni.$u.toast("此活动只支持学生报名")
					return false
				}
				if (this.studentState === 0 && item.index === 1) {
					uni.showModal({
						confirmText: "去录入",
						cancelText: "取消",
						content: "您未录入学生信息，请先录入学生信息",
						cancelColor: "#8F8F94",
						confirmColor: "#3C9CFF",
						success: function(res) {
							if (res.confirm) {
								that.$u.route({
									url: 'pages/componet/main/students/index',
								})
							}
						}
					})
					return false
				}
				if (item.index !== 0) {
					this.$u.route({
						url: item.path,
						params: {
							id: this.activityId,
							current: item.index
						}
					})
				}
			},
			tabsChange(index) {
				this.current = index
			},
			getStudentByOpenId() {
				const data = {
					openId: this.$store.state.$userInfo.openId
				}
				getStudentByOpenId(data).then(res => {
					if (res.id) {
						this.studentState = res.check_state
					}
				})
			},
			loginWx() {
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.getOpenid(res)
					},
					// 失败回调
					fail: (err) => {
						// 弹出错误
						uni.showModal({
							content: '已拒绝小程序获取信息',
							showCancel: false
						})
					}
				});
			},
			getOpenid(res) {
				uni.login({
					success: (item) => {
						const data = {
							"code": item.code
						}
						getopenId(data).then(el => {
							if (el.openId) {
								res.userInfo.openId = el.openId
								this.WxData.avatarUrl = res.userInfo.avatarUrl
								this.WxData.nickName = res.userInfo.nickName
								this.WxData.openId = el.openId
								this.$store.commit("setUserInfo", res.userInfo)
								console.log(res.userInfo, "setUserInfo")
								uni.setStorage({
									key: 'userInfo',
									data: res.userInfo,
									success: function() {
										console.log("保存登录信息")
									}
								});
								this.getUserByOpenId(el.openId)
							}
						})
					},
				});
			},
			getUserByOpenId(openId) {
				//根据openId 获取用户信息，有信息登录，没有信息新增用户信息
				const data = {
					openId: openId
				}
				getUserByOpenId(data).then(res => {
					if (res.userName) {
						res.username = res.userName
						this.WxData.id = res.id
						this.$store.commit("setUserInfo", res)
						this.userLogin(res)
					} else {
						this.userAdd()
					}
				})
			},
			userAdd() {
				let data = {
					openId: this.$store.state.$userInfo.openId,
					nickName: encodeURI(this.$store.state.$userInfo.nickName),
					avatarUrl: this.$store.state.$userInfo.avatarUrl,
					inviteOpenId: this.$store.state.inviteOpenId
				}
				usersave(data).then(res => {
					if (res) {
						this.getUserByOpenId(data.openId)
						//res.openId = data.openId
						//this.userLogin(res)
					}
				})
			},
			userLogin(data) {
				userLogin(data).then(res => {
					if (res.token) {
						this.$store.commit("setUserToken", res.token)
						this.userEdit()
					}
				})
			},
			userEdit() {
				let data = {
					openId: this.WxData.openId,
					nickName: encodeURI(this.WxData.nickName),
					avatarUrl: this.WxData.avatarUrl,
					id: this.WxData.id
				}
				userEdit(data).then(res => {
					if (res) {
						//this.$store.commit("setUserInfo", res)
						this.info()
					}
				})

			},
			showModalPhone() {
				const that = this
				uni.showModal({
					content: "请完善您的个人信息",
					cancelText: "再想想",
					confirmText: "去编辑",
					success: function(res) {
						if (res.confirm) {
							that.$u.route({
								url: 'pages/componet/main/edit/edit'
							})
						}
					}
				})
			},
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.tabs {
			background: #ffffff;
		}

		// 首页
		.detail {}

		//活动报名
		.apply {
			padding-bottom: 128rpx !important;

			/deep/ .u-form-item__body {
				padding: 20rpx 30rpx;
			}



			/deep/.u-checkbox-label--left {
				margin: 0 !important;
			}

			/deep/ .u-checkbox__icon-wrap {
				//margin-right: 28rpx;
			}



			/deep/ .u-button {
				height: 96rpx;
				line-height: 96rpx;
				background: #4587F7;
				border-radius: 48rpx;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				font-size: 32rpx
			}

			/deep/ .u-form-item__body__right__message {
				margin-left: 28rpx !important;
			}

			/deep/.teamBox .u-line {
				border-bottom-width: 0 !important,
			}

			/deep/ .phoneBorder .u-line {
				border-bottom-style: none !important,
			}

			/deep/ .u-checkbox-group--column {
				flex-direction: row;

			}
		}

		// 赛事说明
		.syah {
			/deep/ .u-collapse-item .u-cell {
				margin-top: 16rpx;
				background: #FFFFFF;
			}

			/deep/ .u-cell {
				background: #FFFFFF;
			}

			/deep/ .u-cell__body {
				padding: 24rpx 24rpx;
			}

			/deep/ .u-cell__title-text {
				font-family: HarmonyHeiTi-Medium;
				font-size: 32rpx;
				color: #000000;
				font-weight: bold;
			}

			/deep/ .u-collapse-item__content__text {
				background: #FFFFFF;
				padding: 0 24rpx;
			}
		}

		// 进度
		.plan {}

		// FAQ赛事
		.faq {
			/deep/ .u-collapse-item {
				margin-top: 16rpx;
				background: #FFFFFF;
			}

			/deep/ .u-image {
				margin: auto !important;
			}

			/deep/ .u-cell {
				background: #FFFFFF;
			}

			/deep/ .u-cell__body__content {
				font-family: HarmonyHeiTi-Medium;
				font-size: 32rpx;
				color: #000000;
				font-weight: 500;
			}

			/deep/ .u-cell__body {
				padding: 24rpx 24rpx;
			}
		}
	}
</style>
